<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        background-color: black;
      }
      .con {
        width: 600px;
        height: 500px;
        margin: 50px auto;
        border: 2px solid white;
        background-color: transparent;
      }
      .list {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .list > li {
        position: absolute;
        top: 0;
        left: 0;
        width: 94px;
        height: 94px;
        margin: 1px;
        border: 2px solid purple;
        text-align: center;
        line-height: 94px;
        background-color: bisque;
      }
      #run {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: yellow;
        z-index: 1;
      }
      #btn {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        line-height: 100px;
        text-align: center;
        border: 2px solid skyblue;
        color: white;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="con">
      <ul class="list">
        <!-- <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        <span id="run"></span>
        <span id="btn">启动</span>
      </ul>
    </div>
    <script>
      //获取元素
      var list = document.getElementsByClassName("list")[0];
      //每个li的位置坐标
      var LiPositon = [
        [0, 0],
        [100, 0],
        [200, 0],
        [300, 0],
        [400, 0],
        [500, 0],
        [500, 100],
        [500, 200],
        [500, 300],
        [500, 400],
        [400, 400],
        [300, 400],
        [200, 400],
        [100, 400],
        [0, 400],
        [0, 300],
        [0, 200],
        [0, 100],
      ];
      //给ul添加18个li
      for (var i = 0; i < 18; i++) {
        list.innerHTML += `<li>${i}</li>`;
      }
      //给每个li的位置做遍历
      var lis = document.getElementsByTagName("li");
      console.log(lis);
      for (var i = 0; i < lis.length; i++) {
        lis[i].style.left = LiPositon[i][0] + "px";
        lis[i].style.top = LiPositon[i][1] + "px";
      }
      //获取所需元素
      var btn = document.getElementById("btn");
      var run = document.getElementById("run");
      //初始值
      var i = 0;
      var flg = true;
      var timer = null;
      //封装运动元素的运动过程
      function _timer(d) {
        timer = setInterval(function () {
          run.style.left = LiPositon[i][0] + "px";
          run.style.top = LiPositon[i][1] + "px";
          i++;
          if (i >= LiPositon.length) {
            i = 0;
          }
        }, d);
      }
      var time = null;
      btn.onclick = function () {
        if (flg) {
          flg = !flg;
          btn.innerHTML = "停止";
          btn.style.backgroundColor = "red";
          clearInterval(timer);
          _timer(100);
        } else {
          var c = 100;
          flg = !flg;
          btn.innerHTML = "启动";
          btn.style.backgroundColor = "blue";
          time = setInterval(function () {
            c += 50; //随机数延迟
            clearInterval(timer);
            _timer(c);
            if (c >= 500) {
              btn.innerHTML = "启动";
              btn.style.backgroundColor = "blue";
              clearInterval(timer);
              clearTimeout(time);
            }
          }, 500);
        }
      };
    </script>
  </body>
</html>
